<template>
    <div class="main">
        <Echart id="leftCenter" :options="options" class="left_center_inner" v-if="pageflag" ref="charts"/>
    </div>
</template>

<script>
export default {
    props: ['childMessage'],
    data() {
        return {
            pageflag: true,
            options: {
                // backgroundColor: "#080b30",
                title: {
                    show: false,
                    text: "多线图",
                    textStyle: {
                        align: "center",
                        color: "#fff",
                        fontSize: 20,
                    },
                    top: "5%",
                    left: "center",
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        lineStyle: {
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "rgba(0, 255, 233,0)",
                                    },
                                    {
                                        offset: 0.5,
                                        color: "rgba(255, 255, 255,1)",
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(0, 255, 233,0)",
                                    },
                                ],
                                global: false,
                            },
                        },
                    },
                },
                grid: {
                    top: 30,
                    left: 70,
                    right: 10,
                    bottom: 80,
                },
                xAxis: [
                    {
                        type: "category",
                        axisLine: {
                            show: false,
                        },
                        splitArea: {
                            // show: true,
                            color: "#f00",
                            lineStyle: {
                                color: "#f00",
                            },
                        },
                        axisLabel: {
                            color: "#fff",
                            rotate: 20, // 设置标签旋转角度为45度
                            // fontStyle: "italic", // 设置标签为斜体
                        },
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        // boundaryGap: false,
                        // boundaryGap: ['10%', '10%'],
                        data: ["乐器、书法", "书法、绘画", "运输工具", "其他", "古人类化石", "古籍图书", "名人遗像", "家具", "岩石和矿物", "度量衡器", "文件、宣传品"],
                    },
                ],

                yAxis: [
                    {
                        type: "value",
                        min: 0,
                        // max: 140,
                        splitNumber: 4,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: ["#fff"],
                                opacity: 0.06,
                            },
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            margin: 20,
                            textStyle: {
                                fontSize: 12,
                                color: "rgba(255,255,255,0.5)",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                ],
                series: [
                    {
                        name: "注册总量",
                        type: "line",
                        // smooth: true, //是否平滑
                        showAllSymbol: true,
                        // symbol: 'image://./static/images/guang-circle.png',
                        symbol: "circle",
                        symbolSize: 7,
                        lineStyle: {
                            normal: {
                                color: "#c7def6",
                                shadowColor: "rgba(0, 0, 0, 0)",
                                shadowBlur: 0,
                                shadowOffsetY: 5,
                                shadowOffsetX: 5,
                            },
                        },
                        label: {
                            show: true,
                            position: "top",
                            textStyle: {
                                color: "rgb(142, 191, 232)",
                                fontSize: 12,
                            },
                        },
                        itemStyle: {
                            color: "#ffffff",
                            borderColor: "rgb(144, 155, 167)",
                            borderWidth: 2,
                            shadowColor: "rgba(0, 0, 0, 0)",
                            shadowBlur: 0,
                            shadowOffsetY: 2,
                            shadowOffsetX: 2,
                        },
                        tooltip: {
                            show: false,
                        },
                        areaStyle: {
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "rgba(118, 162, 199,0.4)",
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(118, 162, 199, 0)",
                                    },
                                ],
                                global: false, // 缺省为 false
                            },
                        },
                        data: [502, 205, 332, 281, 398, 214, 334, 398, 214, 334, 398],
                    },
                ],
            }
        };
    },
    created() {
    },
    mounted() {
        this.$nextTick(() => {
            this.options.xAxis[0].data = [];
            this.options.series[0].data = [];
            this.childMessage.forEach((item, index) => {
                this.options.xAxis[0].data.push(item.name);
                this.options.series[0].data.push(item.valule);
            })
        });
    },
    beforeDestroy() {

    },
    methods: {},
};
</script>
<style lang='scss' scoped>
.main {
  width: 100%;
  height: 95%;
  display: flex;
  flex-wrap: wrap;
}
</style>
